<template>
  <el-card>
    <el-form :model="form" label-width="80px">
      <el-form-item label="讲师名">
        <el-input v-model="form.name" placeholder="讲师名"></el-input>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number
          v-model="form.sort"
          controls-position="right"
          :min="0"
          :max="10"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select
          v-model="form.level"
          placeholder="讲师头衔"
          style="width: 240px"
        >
          <el-option label="普通讲师" :value="0"></el-option>
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="form.career" placeholder="讲师资历"></el-input>
      </el-form-item>
      <el-form-item label="讲师头像">
        <el-avatar
          style="width: 160px; height: 160px"
          :src="form.avatar"
        ></el-avatar>
        <el-upload
          :action="`${BASE_API}/ossservice/upload`"
          :on-success="onSuccess"
          :on-error="onError"
        >
          <template #trigger>
            <el-button size="small" type="primary">选取文件</el-button>
          </template>
          <el-button
            style="margin-left: 10px; display: none"
            size="small"
            type="success"
            >上传到服务器</el-button
          >
          <template #tip>
            <div class="el-upload__tip">
              只能上传 jpg/png 文件，且不超过 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="讲师简介">
        <el-input
          type="textarea"
          v-model="form.intro"
          rows="7"
          placeholder="讲师简介"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { addTeacher, getInfoById, updateTeacher } from "@/api/teacher";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { ref, watchEffect } from "vue";
import { BASE_API } from "@/config";

const router = useRouter();
const route = useRoute();

const form = ref({
  name: "风清扬",
  sort: 0,
  career: "996福报",
  level: 1,
  intro: "悔创阿里杰克马，对钱不感兴趣，996福报",
  avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
});

const onSuccess = (res) => {
  console.log(res);
  form.value.avatar = res.data.url;
};

const onError = (err: Error) => {
  ElMessage.error("上传图片失败，请稍后再试！");
  console.log(err);
};

const onSubmit = async () => {
  if (route.params.id) {
    // 修改走这里
    const res = await updateTeacher({ params: form.value });
    res.success &&
      ElMessage.success("修改成功！") &&
      router.push("/Teacher/List");
  } else {
    const res = await addTeacher({ params: form.value });
    res.success &&
      ElMessage.success("添加成功！") &&
      router.push("/Teacher/List");
  }
};

const onUpdate = async () => {
  const res = await getInfoById({ id: route.params.id });
  if (res.success) {
    form.value = res.data.data;
    if (form.value.avatar === "" || form.value.avatar === null) {
      // 默认头像
      form.value.avatar =
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
    }
  }
};

watchEffect(() => {
  if (route.params.id) {
    // 修改的路径进来会到这里
    onUpdate();
  }
});
</script>
